<template>
  <nav>
    <ul>
      <li v-for="c in courseList" :key="c.id">
        <!-- query传参: 方式一 字符串 /desc?name=zhangsan&id=1$sex=M-->
        <!-- <router-link :to="`/desc?name=${c.name}`">{{c.name}}</router-link> -->
        <!-- query传参: 方式二 对象 -->
        <router-link :to="{
                            path:'/desc',
                            query:{
                              name:c.name,
                              id:c.id
                            }
                          }" replace>{{c.name}}</router-link>
        <button type="button" class="btn btn-primary" @click="testPush(c.name,c.id)">{{c.name}}-push</button>
        <button type="button" class="btn btn-primary" @click="testReplace(c.name,c.id)">{{c.name}}-replace</button>
      </li>
    </ul>
    <button type="button" class="btn btn-primary" @click="testGO()">go</button>
    <button type="button" class="btn btn-primary" @click="testBack()">back</button>
    <hr />
    <router-view></router-view>
  </nav>
</template>

<script>
  export default {
    name: 'Course',
    data() {
      return {
        courseList: [{
            id: 1,
            name: 'HTML'
          },
          {
            id: 2,
            name: 'CSS'
          },
          {
            id: 3,
            name: 'JQUERY'
          }
        ]
      }
    },
    mounted() {
      //路由对象
      console.log(this.$route)
      this.test();
    },
    methods: {
      testPush(name, id) {
        this.$router.push({
          path: '/desc',
          query: {
            name: name,
            id: id
          }
        })
      },
      testReplace(name, id) {
        this.$router.replace({
          path: '/desc',
          query: {
            name: name,
            id: id
          }
        })
      },
      //前提是history模式
      testGO() {
        this.$router.go(1)
      },
      testBack() {
        this.$router.back()
      },
      test() {
        console.log("****************");
      }
    }
  }
</script>

<!--
  scoped: 样式作用域
  lang="sass": css语法
-->
<style scoped="scoped">
  li {
    list-style: none;
  }

  nav {
    padding: 30px;
  }

  nav a {
    font-weight: bold;
    color: orange;
  }

  nav a.router-link-exact-active {
    color: greenyellow;
  }
</style>
